<template>
    <canvas id="matrix-back-ground"></canvas>
</template>

<script>
export default {
    name: "Matrix",
    props:['flag'],
    mounted() {
        let c=document.getElementById("matrix-back-ground");
        let	ctx=c.getContext("2d");
        c.width='100vw';
        c.height='100vh';
//				ctx.fillRect(0,0,100,100);
//				a,b,c,d分别代表x方向偏移,y方向偏移,宽，高
        let string1 = "abcdefghijklmnopqrstuvwxyz";
        string1.split("");
        let fontsize=20;
        let columns=c.width/fontsize;
        let drop = [];
        for(let x=0;x<columns;x++)
        {
            drop[x]=0;
        }
        function drap(){
            ctx.fillStyle="rgba(0,0,0,0.1)";
            ctx.fillRect(0,0,c.width,c.height);
            ctx.fillStyle="#0F0";
            ctx.font=fontsize+"px arial";
            for(let i=0;i<drop.length;i++){
                let text1=string1[Math.floor(Math.random()*string1.length)];
                ctx.fillText(text1,i*fontsize,drop[i]*fontsize);
                drop[i]++;
                if(drop[i]*fontsize>c.height&&Math.random()>0.99){//90%的几率掉落
                    drop[i]=0;
                }
            }
        }
        setInterval(drap,100);
    }
}
</script>

<style scoped>
#matrix-back-ground{
    /*flex: 1;*/
    z-index: -1;
    position: absolute;
}
</style>